<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="./jquery-2.1.4/jquery.js"></script>
    <title>注册界面</title>

</head>

<body>
<div style="background-color: aliceblue">
    <h1>注册</h1>
    <div style="margin-left:700px;text-align: center;">
    <form action="./2017-08-15.html" id="f1">

    <table >
        <tr>
            <td align="right">姓名：</td>
            <td><input type="text" id="name"></td>
            <td class="h1">姓名输入不正确</td>
        </tr>
        <tr>
            <td align="right">账号：</td>
            <td><input type="text" id="user"></td>
            <td class="h2">帐号不能为空</td>
        </tr>
        <tr>
            <td align="right">身份证：</td>
            <td><input type="password" id="idcard"></td>
            <td class="h3">身份证必须为18位</td>
        </tr>
        <tr>
            <td align="right">密码：</td>
            <td><input type="password" id="pwd1" value=""></td>
            <td class="h4">密码必须为6到16个字符</td>
        </tr>
        <tr>
            <td align="right">确认密码：</td>
            <td><input type="password" id="pwd2" value=""></td>
            <td class="h5">两次输入的密码不同，请重新输入</td>
        </tr>
        <tr>
            <td></td>
            <td> <input  type="button" id="but1" value="注册" onclick="sub()" >
                <input type="reset" id="but2" value="重置"></td>
            <td></td>
        </tr>

    </table>

    </form>
    </div>
</div>

<script>

    function sub() {
        var user= document.getElementById("user").value;
        if(user.length==0||user.length>20){
            alert("请输入正确的帐号");
            return;
        }else if(document.getElementById("pwd1").value.length==0){
            alert("两次输入密码不同");
            return;
        }
        else document.getElementById("f1").submit();
    }

$("#name").blur(function () {//失去焦点。
    if(this.value.length==0||this.value.length>20)
    $(".h1").show();
})
    $(".h1").ready(function () {
        $(".h1").hide();
    })
$("#name").mousedown(function () {//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
    $(".h1").hide();
})

$("#user").blur(function () {//失去焦点。
    if(this.value.length==0)
        $(".h2").show();
})
$(".h2").ready(function () {
    $(".h2").hide();
})
$("#user").mousedown(function () {//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
    $(".h2").hide();
})


$("#idcard").blur(function () {//失去焦点。
    if(this.value.length==0)
        $(".h3").show();
})
$(".h3").ready(function () {
    $(".h3").hide();
})
$("#idcard").mousedown(function () {//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
    $(".h3").hide();
})

$("#pwd1").blur(function () {//失去焦点。
    if(this.value.length==0)
        $(".h4").show();
})
$(".h4").ready(function () {
    $(".h4").hide();
})
$("#pwd1").mousedown(function () {//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
    $(".h4").hide();
})


$("#pwd2").blur(function () {//失去焦点。
    if(this.value!=document.getElementById("pwd1").value)
        $(".h5").show();
})
$(".h5").ready(function () {
    $(".h5").hide();
})
$("#pwd2").mousedown(function () {//鼠标指针进入元素（让元素获取焦点），并且发生单击的事件。
    $(".h5").hide();
})


</script>


</body>
</html>